<template>
  <div ref="echart" class="echartsss">
  </div>
</template>

<script lang="ts">
import PageShowMixin from "../mixins/PageShowMixin.js";
import simpleElementResizeDetector from "../utils/simple-element-resize-detector.js";
import * as echarts from "echarts";
import {EChartsType} from "echarts";
import {ECBasicOption} from "echarts/types/src/util/types";
import { markRaw } from "vue";
export default {
  name: "EchartsCom",
  mixins:[PageShowMixin],
  data() {
    return {
      echart: null as EChartsType,
      options: null,
      elSizeListernFunc: null,
    }
  },
  mounted() {
    if(this.options) {
      this.echart.setOption(this.options, true)
    }
  },
  beforeUnmount() {
    if(this.elSizeListernFunc) {
      this.elSizeListernFunc()
    }
    if(this.echart) {
      this.echart.dispose()
    }
  },
  methods: {
    // 这个函数进行重写
    windowPageShow(ev) {
      if(ev.persisted){
        // 这里是需要个性化的
        this.resize()
      }
    },
    resize() {
      if(this.options && this.echart) {
        this.echart.resize()
      }
    },
    setOptions<Opt extends ECBasicOption>(options: Opt) {
      if (!this.echart) {
        this.echart = markRaw(echarts.init(this.$refs.echart))
        this.elSizeListernFunc = simpleElementResizeDetector(this.$refs.echart,()=>{
          this.resize()
        })
      }
      this.options = markRaw(options)
      this.echart.setOption(options, true)
    }
  }
}
</script>

<style lang="scss" scoped>
.echartsss{
  width: 100% !important;
  height: 100% !important;
}
</style>
